:root {
    --custom-red: rgb(218, 30, 30);
    --custom-green: rgb(6, 171, 28);
    --custom-blue: rgb(21, 72, 212);
    --custom-gray: rgb(143, 143, 143);
}
* {
    padding: 0;
    border: 0;
    margin: 0;
    outline: 0;
    box-sizing: border-box;
}
::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}
// ::-webkit-scrollbar-track {
//     border-radius: 5px;
// }
// ::-webkit-scrollbar-track-piece {
//     border-radius: 5px;
// }
// ::-webkit-scrollbar-thumb {
//     border-radius: 5px;
//     border: 3px solid transparent;
//     background-color: rgba(190, 190, 190, 0.4);
//     background-clip: padding-box;
// }

html,
body {
    font-size: 13px;
    font-family: -apple-system, system-ui, 'Segoe UI', 'Roboto', 'Ubuntu', 'Cantarell', 'Noto Sans', sans-serif, 'BlinkMacSystemFont', 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial !important;
}

a {
    color: inherit;
    text-decoration: none;
    display: inline-block;
}

.app {
    .link {
        color: #2588ff;
    }

    .green-color {
        color: #44b549;
    }
    .red-color {
        color: #e33;
    }

    .qrcode-wrapper {
        display: flex;
        justify-content: center;
    }
    .qrcode-box {
        border: 4px solid #ddd;
        width: 158px;
        height: 158px;
    }

    .setup-tips {
        text-align: center;
        margin-top: 10px;
        margin-bottom: 20px;
    }

    .setup-input {
        width: 170px;
        margin-bottom: 5px;
    }
    .setup-button {
        margin-bottom: 8px;
        width: 170px;
    }

    .no-data {
        text-align: center;
        padding-top: 50px;
        .text {
            margin-top: 10px;
        }
    }

    .wrapper {
        max-width: $layout-wrapper-width;
        margin: 0 auto;
        height: 100%;
        padding: 0 15px;
    }

    .bg-contain,
    .bg-cover {
        background-repeat: no-repeat;
        background-position: center center;
    }
    .bg-contain {
        background-size: contain;
    }
    .bg-cover {
        background-size: cover;
    }
}

.arco-message-list {
    width: auto !important;
    left: 0;
    right: 0;
}

.arco-dropdown,
.arco-select-dropdown {
    background-color: var(--vscode-editor-background) !important;
    border-color: var(--vscode-editor-foreground) !important;
}
.arco-dropdown-option,
.arco-select-option {
    font-size: 13px !important;
    line-height: 22px !important;
    background-color: var(--vscode-editor-background) !important;
    color: var(--vscode-editor-foreground) !important;
    &:hover {
        background-color: var(--vscode-toolbar-hoverBackground) !important;
    }
}

.arco-modal-container {
    .arco-modal-wrapper {
        top: 15px;
        bottom: auto;
        .arco-modal-body {
            max-height: 80vh;
            overflow-y: auto;
        }
    }
}

.arco-select-view,
.arco-input-wrapper {
    background-color: var(--vscode-editor-background) !important;
    color: var(--vscode-editor-foreground) !important;
}

.arco-icon-hover:hover:before {
    background-color: var(--vscode-toolbar-hoverBackground);
}
